<template>
  <div class="barchart_container">
    <div class="title">
      <img src="../../assets/common/l_title_3.png" alt="">
    </div>
    <div ref="barChart" class="barchart" />
  </div>

</template>

<script>
export default {
  data() {
    return {
      barChart: ''
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart()
    })
  },
  methods: {
    initChart() {
      if (this.barChart != null && this.barChart !== '' && this.barChart !== undefined) {
        this.barChart.dispose()// 销毁
      }
      this.barChart = this.$echarts.init(this.$refs.barChart)
      const option = {
        grid: {
          top: '1%',
          left: '3%',
          bottom: '1%',
          containLabel: true
        },
        xAxis: {
          show: false,
          type: 'value'

        },
        yAxis: {
          type: 'category',
          inverse: true,
          axisLabel: {
            color: '#1FFCE5',
            fontSize: 12
          },
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          data: ['党政办', '经发委', '大数据局', '规建委', '市场监督局', '教育局', '司法局', '应急管理局', '自贸区综合协调局', '公共资源交易中心']
        },
        series: [
          {
            name: '12345数据',
            type: 'bar',
            color: new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [
              '#5b8ff9', '#1ffce5'
            ].map((color, offset) => ({
              color,
              offset
            }))), // 渐变
            label: {
              show: true,
              position: 'insideLeft',
              formatter: '{c}',
              distance: 10,
              color: '#FFFFFF'

            },
            barWidth: 15,
            data: [50, 60, 30, 60, 70, 50, 60, 30, 40, 50]
          }
        ]
      }
      this.barChart.setOption(option)
    }
  }

}
</script>

<style lang="less" scoped>
.barchart_container{
    width: 100%;
    height: 330px;
    background: url('../../assets/common/l_item_3.png') no-repeat;
    background-size: 100%;
    .title{
        padding: 18px 0 14px 34px;
    }
    .barchart{
        width: 100%;
        height: 277px;
    }

}

</style>

